<template>
	<hx-navbar title="订单详情"></hx-navbar>
	<view class="order-detail-container" v-if="!loading">
		<view class="order-detail-header">
			<view class="order-status" v-if="state.order.status == '1'">
				<view> <u-icon :size="32" name="clock"></u-icon><text class="u-padding-left-10">等待付款</text> </view>
				<view class="u-padding-top-10 daifukuan-desc"> 请在30分钟内付款，超时订单自动取消 </view>
			</view>
			<view class="order-status" v-else-if="state.order.status == '2'">
				<view>
					<u-icon :size="32" custom-prefix="custom-icon" name="daifahuo"></u-icon><text class="u-padding-left-10">{{ state.order.statusDesc }}</text>
				</view>
				<view class="u-padding-top-10 daifahuo-desc">订单已付款，等待商家发货</view>
			</view>
			<view v-else-if="state.order.status == '3'">
				<u-icon :size="32" custom-prefix="custom-icon" name="daishouhuo"></u-icon><text class="u-padding-left-10">{{ state.order.statusDesc }}</text>
			</view>
			<view v-else-if="state.order.status == '4'">
				<u-icon :size="32" name="checkmark-circle"></u-icon><text class="u-padding-left-10">{{ state.order.statusDesc }}</text>
			</view>
			<view v-else-if="state.order.status == '11'">
				<u-icon :size="32" name="info-circle"></u-icon><text class="u-padding-left-10">{{ state.order.statusDesc }}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="order-detail-address" v-if="state.order.orderLogistics">
			<u-cell-group :border="false" class="user-address">
				<u-cell-item
					icon="map"
					:arrow="false"
					:border-bottom="false"
					hover-class="none"
					:title="state.order.orderLogistics.detailAddress"
					:label="state.order.orderLogistics.addresseeName + ' ' + state.order.orderLogistics.telephone"
				></u-cell-item>
			</u-cell-group>
		</view>
		<view class="order-detail-content">
			<view class="order-detail-warp" v-for="(item, index) in state.order.orderItemList" :key="index">
				<image :src="item.picUrl" />
				<view class="right">
					<view class="goods-title u-line-2"> {{ item.spuName }} </view>
					<view class="goods-spec" v-if="item.specsInfo"> {{ item.specsInfo }}</view>
					<view class="goods-price">
						<view class="text-price" style="color: red"> {{ item.paymentPrice }} </view>
						<view class="goods-quantity"> x{{ item.buyQuantity }} </view>
					</view>
					<view v-if="state.order.payStatus == '1'">
						<u-button class="refunds-btn" size="mini" shape="circle" @click="toRefunds(item.id, item.status)">{{
							item.status == '0' ? '申请售后' : item.statusDesc
						}}</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="order-detail-info">
			<view class="order-detail-info-warp">
				<view class="item">
					<view class="title"> 商品金额 </view>
					<view class="text-price price"> {{ state.order.totalPrice }} </view>
				</view>
				<view class="item">
					<view class="title"> 运费 </view>
					<view class="text-price price">{{ state.order.freightPrice }} </view>
				</view>
				<view class="item">
					<view class="title"> 优惠券 </view>
					<view style="color: red">
						<text>-</text>
						<text class="text-price price">{{ state.order.couponPrice }}</text>
					</view>
				</view>
				<view class="total-price"
					><text style="font-size: 24rpx; color: #909090" class="u-padding-right-10">共{{ state.order.orderItemList.length }}件 </text> 合计：<text
						class="text-price price"
						>{{ state.order.paymentPrice }}</text
					>
				</view>
			</view>
		</view>
		<view class="order-detail-info">
			<view class="order-detail-info-warp">
				<u-section title="订单信息" :right="false"></u-section>
				<u-gap height="50"></u-gap>
				<view class="item">
					<view class="title"> 配送方式 </view>
					<view> {{ state.order.deliveryWay == '1' ? '普通快递' : state.order.deliveryWay == '2' ? '上门自提' : '无需配送' }} </view>
				</view>
				<view class="item" v-if="state.order.payStatus == '1'">
					<view class="title"> 支付方式 </view>
					<view> {{ state.order.paymentType == '1' ? '微信支付' : state.order.deliveryWay == '2' ? '支付宝支付' : '未知' }} </view>
				</view>
				<view class="item">
					<view class="title"> 订单编号 </view>
					<view> {{ state.order.orderNo }} </view>
				</view>
				<view class="item">
					<view class="title"> 创建时间 </view>
					<view> {{ state.order.createTime }} </view>
				</view>
				<view class="item" v-if="state.order.paymentTime">
					<view class="title"> 付款时间 </view>
					<view> {{ state.order.paymentTime }} </view>
				</view>
				<view class="item" v-if="state.order.deliverTime">
					<view class="title"> 发货时间 </view>
					<view> {{ state.order.deliverTime }} </view>
				</view>
				<view class="item" v-if="state.order.receiverTime">
					<view class="title"> 收货时间 </view>
					<view> {{ state.order.receiverTime }} </view>
				</view>
				<view class="item" v-if="state.order.cancelTime">
					<view class="title"> 取消时间 </view>
					<view> {{ state.order.cancelTime }} </view>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="navigation">
			<order-operation
				:orderInfo="state.order"
				@orderDel="orderDel($event)"
				@orderReceiver="orderReceiver($event)"
				@orderCancel="orderCancel($event)"
			></order-operation>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getById } from '@/api/order/orderInfo';
import { getById as getItemById } from '@/api/order/orderItem';
import { reactive, ref } from 'vue';
import OrderOperation from '@/components/order-operation/index.vue';

onLoad((options) => {
	getOrder(options?.id);
});
// 定义变量
const loading = ref(true);
const state = reactive<{ order: any }>({
	order: {},
});
// 订单查询
const getOrder = (id: string) => {
	getById(id).then((response) => {
		loading.value = false;
		state.order = response.data;
	});
};
// 订单删除
const orderDel = (row: any) => {
	uni.navigateBack({
		delta: 1,
	});
};
// 订单确认收货
const orderReceiver = (row: any) => {
	getOrder(row.id);
};
// 订单取消
const orderCancel = (row: any) => {
	getOrder(row.id);
};
// 跳转到退款申请页面
const toRefunds = (orderItemId: string, status: string) => {
	if (status == '0') {
		uni.$hxRouter.push('/pages/order/order-refunds/submit?orderItemId=' + orderItemId);
	} else {
		//查询详情获取退款单id
		getItemById(orderItemId).then((response) => {
			uni.$hxRouter.push('/pages/order/order-refunds/refunds-detail/index?id=' + response.data.orderRefund.id);
		});
	}
};
</script>

<style lang="scss" scoped>
.order-detail-container {
	padding: 20rpx;

	.u-cell {
		padding: 0rpx !important;
	}

	.order-detail-header {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx;

		.order-status {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.daifukuan-desc {
			display: flex;
			align-items: center;
			color: #909090;
			font-size: 24rpx;
		}

		.daifahuo-desc {
			color: #909090;
			font-size: 24rpx;
		}
	}

	.order-detail-address {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.user-address {
			margin-top: 20rpx;
		}
	}

	.order-detail-content {
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;

		.order-detail-warp {
			padding-top: 20rpx;
			display: flex;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1 0 0%;
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					font-size: 28rpx;
				}

				.goods-spec {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909090;
				}

				.goods-price {
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.refunds-btn {
					float: right;
				}
			}
		}
	}

	.order-detail-info {
		margin-top: 20rpx;
		border-radius: 10rpx;

		.order-detail-info-warp {
			background-color: #fff;
			padding: 20rpx;

			.item {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				justify-content: space-between;

				.title {
					font-weight: 700;
				}

				.price {
					font-weight: 700;
				}
			}

			.total-price {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				justify-content: flex-end;

				.price {
					font-weight: 700;
					color: red;
				}
			}
		}
	}

	.navigation {
		position: fixed;
		bottom: 0px;
		right: 0px;
		display: flex;
		justify-content: flex-end;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 18rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		width: 100%;
	}
}
</style>
